<template>
    <div class="content_list">
      <vcrolls :data="items" class="seamless-warp">
        <ul class="item">
          <li v-for="(md, index) in items" :key="index">
            <div v-if="md.ROWNUM === 888888" class="rank_month_list" >
              <div class="rank_month_list_row">
                <div class="rank_month_list_cell_6">
                  {{md.USERNAME}}
                </div>
              </div>
            </div>
            <div v-else class="rank_month_list" >
              <div class="rank_month_list_row">
                <div class="rank_month_list_cell">
                  <div class="user_avatar">
                    <span class="img_box">
                      <img :src="/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(md.HEADPHOTOURL) ? md.HEADPHOTOURL : userAvatar" alt="用户头像">
                    </span>
                  </div>
                </div>
                <div class="rank_month_list_cell" v-if="md.ROWNUM === 1">
                  <img src="../../assets/Champion.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                </div>
                <div class="rank_month_list_cell"  v-else-if="md.ROWNUM === 2">
                  <img src="../../assets/Runnerup.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                </div>
                <div class="rank_month_list_cell" v-else-if="md.ROWNUM === 3" >
                  <img src="../../assets/seasonArmy.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                </div>
                <div class="rank_month_list_cell" v-else>
                <span style="display: block;width: 0.38rem;height: 0.5rem;line-height: 0.5rem;font-size: 0.18rem;text-align: center">{{md.ROWNUM}}</span>
                </div>
                <div class="rank_month_list_cell">
                  {{md.USERNAME}}
                </div>
                <div class="rank_month_list_cell">
                  {{md.DCTZE}}万
                </div>
                <div class="rank_month_list_cell">
                  {{md.MBTZE}}万
                </div>
                <div class="rank_month_list_cell">
                  {{md.RATE}}%
                </div>
              </div>
            </div>
          </li>
        </ul>
      </vcrolls>
    </div>
</template>

<script>
import vcrolls from 'vue-seamless-scroll';

export default {
  components: {
    vcrolls
  },
  props: {
    items: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      msg : '',
      flag: true,
      contentSwper: null,
      userAvatar: require('../../assets/avatar52.png'),
    }
  },
    computed: {
    classOption () {
      return {
        step: 1,
        limitMoveNum: 2,
        waitTime: 2000,
        switchDelay: 1000,
        singleHeight: '0.92',
        isSingleRemUnit: true // 是否启用rem度量标准
      }
    }
  }
}
</script>


<style lang="scss" scoped>
  .content_list{
    .seamless-warp{
      height: 2.89rem;
      overflow: hidden;
      .item{
        list-style: none;
        padding: 0;
        margin: 0 auto;
        li {
          height: 0.92rem;
          line-height: 0.92rem;
          .rank_month_list{
            padding: 0.1rem 0 0;
            display: table;
            width: 100%;
            height: auto;
            .rank_month_list_row{
              display: table-row;
              width: 100%;
              .rank_month_list_cell_6{
                display: table-cell;
                padding-left: 0.1rem;
                width: 100%;
                height: 0.92rem;
                font-size: 0.16rem;
                line-height: 0.92rem;
                color: #75787e;
              }
              .rank_month_list_cell {
                display: table-cell;
                width:  auto;
                height: 0.92rem;
                font-size: 0.16rem;
                color: #75787e;
                line-height: 0.92rem;
                vertical-align: middle;
                .user_avatar{
                  padding: 0.04rem;
                  width: 0.74rem;
                  height: 0.74rem;
                  border-radius: 0.74rem;
                  -webkit-border-radius: 0.74rem;
                  -moz-border-radius: 0.74rem;
                  background: #282d35;
                  .img_box{
                    display: block;
                    width: 0.66rem;
                    height: 0.66rem;
                    overflow: hidden;
                    border-radius: 0.66rem;
                    -webkit-border-radius: 0.66rem;
                    -moz-border-radius: 0.66rem;
                  }
                }
                img{
                  display: block;
                  max-width: 100%;
                  height: auto;
                }
                &:first-child{
                  width: 0.95rem;
                }
                &:nth-child(2){
                  width: 0.82rem;
                }
                &:nth-child(3){
                  width: 0.7rem;
                }
                &:nth-child(4){
                  width: 0.85rem;
                }
                &:nth-child(5){
                  width: 0.8rem;
                }
                &:nth-child(6){
                  width: 1.02rem;
                }
              }
            }
          }
        }
      }
    }
  }
</style>

